/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-05-12 11:48:21
 * @LastEditTime: 2022-05-30 11:21:31
 */
import { useMemo, useState } from 'react';
import { Button, Space } from 'antd';
import { useDictionaryContext } from '../contexts/DictionaryContext';
import AddDictionaryItemDialog from './dialogs/AddDictionaryItem';

const PageOperate = () => {
  const { selectDictionary, selectItems, deleteDicItemFunc } = useDictionaryContext();
  const [addItemVisible, setaddItemVisible] = useState(false);

  const delSelect = () => {
    deleteDicItemFunc(selectItems);
  };

  return (
    <>
      <div className="filter-container">
        <p className="page-title">
          {' '}
          {selectDictionary.name}[{selectDictionary.code}]
        </p>
        <Space size="small">
          <Button disabled>保存排序</Button>
          <Button disabled>导出XML</Button>
          <Button disabled>导出EXCEL</Button>
          <Button disabled>导入</Button>
          <Button
            danger
            disabled={selectItems.length <= 0}
            onClick={() => {
              delSelect();
            }}
          >
            删除选中
          </Button>
          <Button
            disabled={!(selectDictionary && selectDictionary.id)}
            onClick={() => {
              setaddItemVisible(true);
            }}
          >
            新建字典项
          </Button>
        </Space>
      </div>
      {useMemo(
        () => (
          <AddDictionaryItemDialog
            visible={addItemVisible}
            onClose={() => setaddItemVisible(false)}
          />
        ),
        [addItemVisible]
      )}
    </>
  );
};

export default PageOperate;
